import presetRemToPx from '@unocss/preset-rem-to-px'
import { defineConfig, presetIcons, presetMini, presetTypography, presetUno, transformerDirectives } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetTypography(),
    presetMini(),
    presetIcons(),
    // @ts-ignore
    presetRemToPx(),
  ],
  rules: [
    // 项目相关视图 unocss rule
    ['h-navbar', { height: 'var(--app-nav-bar-height)' }],
    ['text-main-app', { color: 'var(--app-text-color-main)' }],
    ['text-second-app', { color: 'var(--app-text-color-second)' }],
    ['text-third-app', { color: 'var(--app-text-color-third)' }],
    ['text-primary-app', { color: 'var(--app-color-primary)' }],
    ['bg-primary-app', { 'background-color': 'var(--app-color-primary)' }],
    ['border-primary-app', { 'border-color': 'var(--app-color-primary)' }],
    // <Render />内相关视图 unocss rule
    ['text-main-render', { color: 'var(--render-text-color-main)' }],
    ['text-second-render', { color: 'var(--render-text-color-second)' }],
    ['text-third-render', { color: 'var(--render-text-color-third)' }],
    ['text-primary-render', { color: 'var(--render-color-primary)' }],
    ['bg-primary-render', { 'background-color': 'var(--render-color-primary)' }],
    ['border-primary-render', { 'border-color': 'var(--render-color-primary)' }],
  ],
  safelist: ['i-ant-design:account-book-filled'],
  transformers: [
    transformerDirectives({
      applyVariable: false,
      enforce: 'pre',
    }),
  ],
})
